<!DOCTYPE html>
<html>

<head>
    <!-- bower:css -->
    <link rel="stylesheet" href="../../bower_components/colorbox/example1/colorbox.css" />
    <link rel="stylesheet" href="../../bower_components/swipebox/src/css/swipebox.min.css" />
    <link rel="stylesheet" href="../../dist/css/justifiedGallery.css" />
    <!-- endbower -->
</head>

<body>
<h1>Randomize with norewind</h1>
<p>Test that only the latest entries are randomized. New images must be in a random order.</p>
<!-- TODO this test could be automated -->
<div><button id="addImgs">Add Images</button></div><br/>
<div id="gallery">
</div>

<!-- bower:js -->
<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/colorbox/jquery.colorbox.js"></script>
<script src="../../bower_components/swipebox/src/js/jquery.swipebox.min.js"></script>
<script src="../../dist/js/jquery.justifiedGallery.js"></script>
<!-- endbower -->
<script>
    availableImgs = [
        { desc : "What's your destination?", src : "../photos/8083451788_552becfbc7_m.jpg" },
        { desc : "Just in a dream Place", src : "../photos/7948632554_01f6ae6b6f_m.jpg" },
        { desc : "Truthful Innocence", src : "../photos/7302459122_19fa1d8223_m.jpg" },
        { desc : "Simply my Brother", src : "../photos/7222046648_5bf70e893a_m.jpg" },
        { desc : "Freedom", src : "../photos/7002395006_29fdc85f7a_m.jpg" }
    ];

    var $gallery = $("#gallery");

    function addImages() {
        for (var i = 0; i < availableImgs.length; i++) {
            $gallery.append('<a><img src="' + availableImgs[i].src + '" /></a>');
        }
        $gallery.justifiedGallery('norewind');
    }

    $gallery.justifiedGallery({
        randomize: true,
        rowHeight : 120
    });

    addImages();
    $('#addImgs').click(addImages);
</script>
</body>

</html>
